<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <style>
        header {
            min-height: 2.25rem;
            line-height: 2.25rem;
            background-color:#FEE407;
            font-size: 0.9rem;
            color: #4A4A4A;
            /*border-bottom: 1px solid #eee;*/
        }

        footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            min-height: 2.25rem;
            border-top: 1px solid #eee;
            padding-top: 0.25rem;
            padding-bottom: 0.25rem;
            box-shadow: 0 0 5px 0 rgba(0,0,0,0.10);
        }

        footer .item {
            text-align: center;
        }

        .active > .title {
            color: #F6C92A;
        }

        footer .icon{
          width: 1rem;
          margin: 0 auto;
        }

        footer .icon img{
          width: 90%;
          height: 100%;
        }

        footer .title{
          font-size: 0.5rem;
        }
    </style>
</head>

<body class="wrap">
    <header class="hj_text_center">
        消防工程师
    </header>
    <section>

    </section>
    <footer>
        <div class="flex">
            <div onclick="switchTab(this)" data-id="0" class="item flex_1 active">
              <div class="icon"><img class="img_icon" src="images/learn-active.png" alt=""></div>
              <div class="title">课程</div>
            </div>
            <div style="display:none" onclick="switchTab(this)" data-id="1" class="item flex_1">
              <div class="icon"><img class="img_icon" src="images/info.png" alt=""></div>
              <div class="title">信息</div>
            </div>
            <div onclick="switchTab(this)" data-id="2" class="item flex_1">
              <div class="icon"><img class="img_icon" src="images/find.png" alt=""></div>
            <div class="title">发现</div>
          </div>
            <div onclick="switchTab(this)" data-id="3" class="item flex_1">
              <div class="icon"><img class="img_icon" src="images/mine.png" alt=""></div>
              <div class="title">我的</div>
            </div>
        </div>
    </footer>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/util.js"></script>
<script type="text/javascript">
    var headerH; // 获取 header 标签元素
    var footerH;
    apiready = function() {
        var header = $api.dom('header'); // 获取 header 标签元素
        var footer = $api.dom('footer'); // 获取 footer 标签元素
        // 1.修复开启沉浸式效果带来的顶部Header与手机状态栏重合的问题，最新api.js方法已支持适配iPhoneX；
        // 2.默认已开启了沉浸式效果 config.xml中 <preference name="statusBarAppearance" value="true"/>
        // 3.沉浸式效果适配支持iOS7+，Android4.4+以上版本
        headerH = $api.fixStatusBar(header);
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            api.closeWidget();
        });

        api.setStatusBarStyle({
            style: 'dark'
        });
        // 最新api.js为了适配iPhoneX增加的方法，修复底部Footer部分与iPhoneX的底部虚拟横条键重叠的问题；
        footerH = $api.fixTabBar(footer);
        //输出Log，Log将显示在APICloud Studio控制台
        console.log(token);
        if (token == null) {
            api.openWin({
                name: 'login',
                url: 'html/login.html',
                bounces: false,
                allowEdit: true,
                slidBackEnabled:false
            });
        } else {
            openGroup();
        };

        api.addEventListener({
            name: 'first_tips'
        }, function(ret, err) {
          api.setPrefs({
              key: 'first_tips',
              value: '1'
          });
        });
    }

    //初始化索引
    function setFrameGroup(index){
      console.log(index);
      api.setFrameGroupIndex({
          name: 'main_group',
          scroll:true,
          index: index,
          reload:true
      });
    }

    //切换按钮
    function switchTab(obj) {
        var el = $api.dom('.active');
        $api.removeCls(el, 'active');
        $api.addCls(obj, 'active');
        var index = obj.getAttribute('data-id');
        index = parseInt(index);
        switchDefaultIcon();
        switchActiveIcon(index);
        setTitle(index);
        api.setFrameGroupIndex({
            name: 'main_group',
            scroll:true,
            index: index,
            reload:true
        });

        if (index == 3) {
          //判断是否首次打开应用
        api.getPrefs({
            key: 'mine_tips'
        }, function(ret, err){
            if( ret.value == '' ){
              api.openFrame({
                  name: 'mine_tips',
                  url: 'html/mine_tips.html',
                  rect: {
                      x: 0,
                      y: 0,
                  },
                  pageParam:{
                    type:0
                  },
                  bounces: false,
                  bgColor: 'rgba(0,0,0,0.5)',
              });
            }else{
                //  alert( JSON.stringify( err ) );
            }
        });

        }

    }
    //切换普通图标
    function switchDefaultIcon()
    {
      var imgEl = $api.domAll('.item .img_icon');
      $api.attr(imgEl[0], 'src', 'images/learn.png');
      $api.attr(imgEl[1], 'src', 'images/info.png');
      $api.attr(imgEl[2], 'src', 'images/find.png');
      $api.attr(imgEl[3], 'src', 'images/mine.png');
    }

    //切换图标
    function switchActiveIcon(index)
    {
      var imgEl = $api.dom('.active .img_icon');
      switch (index) {
        case 0:
          $api.attr(imgEl, 'src', 'images/learn-active.png');
          break;
        case 1:
          console.log( $api.html(imgEl) );
          $api.attr(imgEl, 'src', 'images/info-active.png');
          break;
        case 2:
          $api.attr(imgEl, 'src', 'images/find-active.png');
          break;
       case 3:
          $api.attr(imgEl, 'src', 'images/mine-active.png');
          break;
      }
    }

    function openGroup() {

        api.openFrameGroup({
            name: 'main_group',
            scrollEnabled:'false',
            bounces: false,
            rect: {
                marginTop: headerH, // main页面距离win顶部的高度
                marginBottom: footerH, // main页面距离win底部的高度
                w: 'auto',
            },
            frames: [{
                name: 'lesson',
                url: './html/lesson.html',
                bgColor: '#fff'
            }, {
                name: 'info',
                url: './html/info.html',
                bgColor: '#fff'
            }, {
                name: 'find',
                url: './html/find.html',
                bgColor: '#fff'
            }, {
                name: 'mine',
                url: './html/mine.html',
                bgColor: '#fff'
            }]
        }, function(ret, err) {
            var index = ret.index;
            $api.removeCls($api.dom('.active'), 'active');
            var dom = $api.dom('.item[data-id="' + index + '"]');
            $api.addCls(dom, 'active');
            switchDefaultIcon();
            switchActiveIcon(index);
            setTitle(index);
        });

        //判断是否首次打开应用
      api.getPrefs({
          key: 'first_tips'
      }, function(ret, err){
          if( ret.value == '' ){
            api.openFrame({
                name: 'first_tips',
                url: 'html/first_tips.html',
                rect: {
                    x: 0,
                    y: 0,
                },
                pageParam:{
                  type:0
                },
                bounces: false,
                bgColor: 'rgba(0,0,0,0.5)',
            });
          }else{
              //  alert( JSON.stringify( err ) );
          }
      });



    }

    //修改header标题
    function setTitle(index)
    {
      console.log(index);
      switch (index) {
        case 0:
          //$api.html($api.dom('header'),text);
          break;
        case 1:
          $api.html($api.dom('header'),"信息");
          break;
        case 2:
          $api.html($api.dom('header'),"发现");
          break;
        case 3:
          $api.html($api.dom('header'),"我的");
          break;
      }
    }
</script>

</html>
